<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-business-info-reupload">
    <view class="input-con amount-input-con">
      <uni-forms
        ref="businessInfoFormRef"
        :model-value="dataForm"
        :rules="rules"
        validate-trigger="submit"
      >
        <!-- 身份证证件照 -->
        <view class="setting-info-item">
          <view class="title">
            <text class="star">
              *
            </text>
            <text class="txt">
              法人身份证
            </text>
          </view>
          <view class="id-upload-image">
            <uni-forms-item
              name="identityCardFront"
              class="id-front"
            >
              <view class="upload-image">
                <view class="upload-con">
                  <view
                    v-if="!dataForm.identityCardFront"
                    class="upload-btn"
                    @tap="onUploadImg('identityCardFront')"
                  >
                    <view class="up-text text-btn">
                      +添加
                    </view>
                    <view class="up-text">
                      上传身份证人像面
                    </view>
                  </view>
                  <view
                    v-if="dataForm.identityCardFront"
                    class="upload-con"
                    @tap.stop="onPreviewImg(dataForm.identityCardFront)"
                  >
                    <image
                      :src="util.checkFileUrl(dataForm.identityCardFront)"
                      mode="aspectFit"
                      class="up-img-con"
                    />
                    <view
                      class="del-btn"
                      @tap.stop="onDelLoadImg('identityCardFront')"
                    >
                      <image
                        class="del-img"
                        src="@/static/images/close2.png"
                      />
                    </view>
                  </view>
                </view>
              </view>
            </uni-forms-item>
            <uni-forms-item name="identityCardLater">
              <view class="upload-image">
                <view class="upload-con">
                  <view
                    v-if="!dataForm.identityCardLater"
                    class="upload-btn"
                    @tap="onUploadImg('identityCardLater')"
                  >
                    <view class="up-text text-btn">
                      +添加
                    </view>
                    <view class="up-text">
                      上传身份证国徽面
                    </view>
                  </view>
                  <view
                    v-if="dataForm.identityCardLater"
                    class="upload-con"
                    @tap.stop="onPreviewImg(dataForm.identityCardLater)"
                  >
                    <image
                      :src="util.checkFileUrl(dataForm.identityCardLater)"
                      mode="aspectFit"
                      class="up-img-con"
                    />
                    <view
                      class="del-btn"
                      @tap.stop="onDelLoadImg('identityCardLater')"
                    >
                      <image
                        class="del-img"
                        src="@/static/images/close2.png"
                      />
                    </view>
                  </view>
                </view>
              </view>
            </uni-forms-item>
          </view>
        </view>
        <!-- 营业执照电子版 -->
        <view class="setting-info-item">
          <uni-forms-item name="businessLicense">
            <view class="title">
              <text class="star">
                *
              </text>
              <text class="txt">
                营业执照电子版
              </text>
            </view>
            <view class="upload-image bus-license">
              <view class="upload-con">
                <view
                  v-if="!dataForm.businessLicense"
                  class="upload-btn"
                  @tap="onUploadImg('businessLicense')"
                >
                  <view class="up-text text-btn">
                    +添加
                  </view>
                  <view class="up-text">
                    上传文字清晰的照片，露出边框和国徽
                  </view>
                </view>
                <view
                  v-if="dataForm.businessLicense"
                  class="upload-con"
                  @tap.stop="onPreviewImg(dataForm.businessLicense)"
                >
                  <image
                    :src="util.checkFileUrl(dataForm.businessLicense)"
                    mode="heightFix"
                    class="up-img-con "
                  />
                  <view
                    class="del-btn"
                    @tap.stop="onDelLoadImg('businessLicense')"
                  >
                    <image
                      class="del-img"
                      src="@/static/images/close2.png"
                    />
                  </view>
                </view>
              </view>
            </view>
          </uni-forms-item>
        </view>
      </uni-forms>
    </view>
    <view
      class="footer-btn"
      @tap="onSubmit"
    >
      确认
    </view>
  </view>
</template>

<!-- eslint-disable n/no-callback-literal -->
<script setup>
import { onMounted, reactive } from 'vue'
import util from '@/utils/util'
const dataForm = reactive({
  identityCardFront: '',
  identityCardLater: '',
  businessLicense: ''
})
const rules = ref({
  identityCardFront: {
    rules: [
      { required: true, errorMessage: '请上传身份证人像面' },
      {
        validateFunction: (rule, value, data, callback) => {
          if (dataForm.identityCardFront.trim().length === 0) {
            callback('请上传身份证人像面')
            return false
          }
        }
      }
    ]
  },
  identityCardLater: {
    rules: [
      { required: true, errorMessage: '请上传身份证国徽面' },
      {
        validateFunction: (rule, value, data, callback) => {
          if (dataForm.identityCardLater.trim().length === 0) {
            callback('请上传身份证国徽面')
            return false
          }
        }
      }
    ]
  },
  businessLicense: {
    rules: [
      { required: true, errorMessage: '请上传营业执照电子版' },
      {
        validateFunction: (rule, value, data, callback) => {
          if (dataForm.businessLicense.trim().length === 0) {
            callback('请上传营业执照电子版')
            return false
          }
        }
      }]
  }
})
onMounted(() => {
  onGetShopCompany()
})
/**
 * 获取工商信息
 */
let shopCompanyId = null
let shopId = null
const onGetShopCompany = () => {
  const params = {
    url: '/shop/shopCompany',
    method: 'GET'
  }
  http.request(params).then(({ data }) => {
    shopCompanyId = data.shopCompanyId
    shopId = data.shopId
  })
}
/**
 * 上传图片
 * @param {String} type
 */
// eslint-disable-next-line max-lines-per-function
const onUploadImg = function (type) {
  // #ifdef APP-PLUS
  uni.chooseImage({
    count: 1, // 默认9
    sizeType: ['compressed'],
    sourceType: ['album'],
    success: (res) => {
      const tempFilePaths = res.tempFilePaths[0]
      // 上传图片
      http.request({
        url: '/admin/file/getPreSignUrl',
        method: 'GET',
        data: { fileName: res.tempFiles[0].name, isImFile: false }
      }).then(({ data }) => {
        util.plusIo(tempFilePaths).then((buffer) => {
          uni.request({
            url: data.preSignUrl,
            method: 'PUT',
            data: buffer,
            success: function () {
              http.request({
                url: '/admin/file/uploadSuccess',
                method: 'PUT',
                data: [
                  {
                    fileId: data.fileId,
                    attachFileGroupId: 0,
                    type: 1,
                    fileSize: res.tempFiles[0].size
                  }
                ]
              }).then((responseData) => {
                if (responseData.code === '00000') {
                  // 根据上传传图片id 获取文件路径
                  http.request({
                    url: '/admin/file/attachFilePage',
                    method: 'get',
                    data: {
                      fileId: data.fileId,
                      current: 1,
                      size: 1,
                      type: 1
                    }
                  }).then(({ data }) => {
                    switch (type) {
                      case 'identityCardFront':
                        // 上传身份证人像面
                        dataForm.identityCardFront = data.records[0].filePath
                        break
                      case 'identityCardLater':
                        // 上传身份证国徽面
                        dataForm.identityCardLater = data.records[0].filePath
                        break
                      case 'businessLicense':
                        // 营业执照电子版
                        dataForm.businessLicense = data.records[0].filePath
                        break
                      default:
                        break
                    }
                  })
                } else {
                  uni.showToast({
                    title: '上传失败',
                    icon: 'none'
                  })
                }
              })
            },
            fail: function () {
              uni.hideLoading()
            }
          })
        })
      })
    }
  })
  // #endif
  // #ifdef H5
  uni.chooseImage({
    count: 1, // 默认9
    sizeType: ['compressed'],
    sourceType: ['album'],
    success: (res) => {
      // 图片的本地临时文件路径列表
      const tempFilePaths = res.tempFilePaths[0]
      // 上传图片
      http.request({
        url: '/admin/file/getPreSignUrl',
        method: 'GET',
        data: { fileName: res.tempFiles[0].name, isImFile: false }
      }).then(({ data }) => {
        uni.request({
          url: tempFilePaths,
          method: 'GET',
          responseType: 'arraybuffer',
          success: function (requestRes) {
            uni.request({
              url: data.preSignUrl,
              method: 'PUT',
              data: requestRes.data,
              success: function () {
                http.request({
                  url: '/admin/file/uploadSuccess',
                  method: 'PUT',
                  data: [
                    {
                      fileId: data.fileId,
                      attachFileGroupId: 0,
                      type: 1,
                      fileSize: res.tempFiles[0].size
                    }
                  ]
                }).then((responseData) => {
                  if (responseData.code === '00000') {
                    // 根据上传传图片id 获取文件路径
                    http.request({
                      url: '/admin/file/attachFilePage',
                      method: 'get',
                      data: {
                        fileId: data.fileId,
                        current: 1,
                        size: 1,
                        type: 1
                      }
                    }).then(({ data }) => {
                      switch (type) {
                        case 'identityCardFront':
                        // 上传身份证人像面
                          dataForm.identityCardFront = data.records[0].filePath
                          break
                        case 'identityCardLater':
                        // 上传身份证国徽面
                          dataForm.identityCardLater = data.records[0].filePath
                          break
                        case 'businessLicense':
                        // 营业执照电子版
                          dataForm.businessLicense = data.records[0].filePath
                          break
                        default:
                          break
                      }
                    })
                  } else {
                    uni.showToast({
                      title: '上传失败',
                      icon: 'none'
                    })
                  }
                })
              },
              fail: function () {
                uni.hideLoading()
              }
            })
          }
        })
      })
    }
  })
  // #endif
}
/**
 *  图片预览
 */
const onPreviewImg = (src) => {
  uni.previewImage({
    urls: [src]
  })
}
/**
 * 删除图片
 */
const onDelLoadImg = (type) => {
  dataForm[type] = ''
}
// 重新提交
const businessInfoFormRef = ref(null)
const onSubmit = () => {
  businessInfoFormRef.value.validate().then(() => {
    http.request({
      url: '/shop/shopCompany/uploadIdCard',
      method: 'put',
      data: {
        shopCompanyId,
        shopId,
        ...dataForm
      }
    }).then(({ data }) => {
      uni.showToast({
        title: data,
        icon: 'none'
      })
      setTimeout(() => {
        uni.redirectTo({
          url: '/package-settings/pages/store-settings-business/store-settings-business'
        })
      }, 1500)
    })
  })
}
</script>

<style lang="scss" scoped>
@import './business-info-reupload.scss';
</style>
